<template>
  <div class="admin">
    <div class="admin-view">
      <loading v-if="!status" />
      <div class="no-admin" v-else-if="status === 1">对不起，你不是管理员，你的权限不足，请联系站长。</div>
      <div v-else class="admin-wrapper">
        <div class="actions">
          <ul>
            <li v-for="data in actionsData" :key="data.id">
              <router-link :to="data.to">{{data.text}}</router-link>
            </li>
          </ul>
        </div>
        <div class="body">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "Vuex";
export default {
  name: "admin",
  data() {
    return {
      status: 0,
      actionsData: [
        {
          text: "用户操作",
          to: "/admin/user"
        },
        {
          text: "@全体用户",
          to: "/admin/message"
        },
        {
          text: "发布资源",
          to: "/admin/resource"
        }
      ]
    };
  },
  mounted() {
    if (this.userInfoData) {
      this.setStatus();
    }
  },
  watch: {
    userInfoData() {
      this.setStatus();
    }
  },
  methods: {
    setStatus() {
      if (this.userInfoData) {
        if (this.userInfoData.class === 1) {
          this.status = 2;
        } else {
          this.status = 1;
        }
      }
    }
  },
  computed: {
    ...mapState("user", ["userInfoData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.admin
  width: 100%
  min-height: 93vh
  overflow: hidden
  .admin-view
    width: 1280px
    margin: 20px auto
    height: 100%
    .no-admin
      width: 100%
      height: 100px
      @include flex(center,center)
    .admin-wrapper
      width: 100%     
      @include flex(space-between,flex-start)
      .actions
        flex: 0 0 11%
        background-color: #fff
        overflow: hidden
        padding: 20px 0
        >ul
          width: 100%
          >li
            width: 100%
            height: 40px
            line-height: 40px
            margin-bottom: 10px
            >a
              display: block
              padding: 0 20px
              width: 100%
              height: 100%
              &:hover
                &:not(.router-link-active)                
                  background-color: #eee
                  color: #333
            .router-link-active              
              background-color: #eb2001
              color: #fff                  
      .body
        flex: 0 0 88%
        padding: 20px
        background-color: #fff
        overflow: hidden
</style>